<template>
  <!--毕业设计（论文）时间设置-->
  <div class="edu-page-warp">
    <ConditionCard label-width="100px" label-position="right"  @search="searchList" @reset="reset" :expandable="false" :expand="false">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('graduationDesign.graduationYear')">
            <el-date-picker class="dateclass" v-model="queryForm.grade" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.defaultCurrentYear')">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </ConditionCard>
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('graduationDesign.graduationDesignTime')}}</div>
      <el-form ref="graduationAuditTableForm" :model="graduationAuditTableForm" :rules="graduationAuditTableRules">
        <edu-table :data="graduationAuditTableForm.graduationAuditTableData" :pagination="false" :selection="false">
          <edu-table-column :label="$t('graduationDesign.graduationDesignName')" prop="designName" min-width="130"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.startTime')" prop="startTime" min-width="130">
            <template slot-scope="scope">
              <el-form-item :prop="'graduationAuditTableData.' + scope.$index + '.startTime'" :rules="graduationAuditTableRules.startTime" class="table-form-itemclass">
                <el-date-picker class="table-date" v-model="scope.row.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('graduationDesign.pleaseChoose')">
                </el-date-picker>
              </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('graduationDesign.endTime')" prop="endTime" min-width="130">
            <template slot-scope="scope">
              <el-form-item :prop="'graduationAuditTableData.' + scope.$index + '.endTime'" :rules="graduationAuditTableRules.endTime" class="table-form-itemclass">
                <el-date-picker class="table-date" v-model="scope.row.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('graduationDesign.pleaseChoose')">
                </el-date-picker>
              </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('graduationDesign.weekNum')" prop="weekCount" min-width="90">
            <template slot-scope="scope">
              <el-form-item :prop="'graduationAuditTableData.' + scope.$index + '.weekCount'" :rules="graduationAuditTableRules.weekCount" class="table-form-itemclass">
                <el-input class="table-input" v-model="scope.row.weekCount" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
              </el-form-item>
            </template>
          </edu-table-column>
          <!-- <edu-table-column label="状态" prop="status" min-width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.status">已启用</span>
              <span v-else>已停用</span>
            </template>
          </edu-table-column> -->
          <edu-table-column :label="$t('graduationDesign.operation')" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="onSave(scope.row, scope.$index)">{{$t('graduationDesign.save')}}</el-button>
              <!-- <el-button type="text" v-if="scope.row.status" @click="onEnable(scope.row, scope.$index, 'deactivate')">停用</el-button>
              <el-button type="text" v-else @click="onEnable(scope.row, scope.$index, 'enable')">启用</el-button> -->
            </template>
          </edu-table-column>
        </edu-table>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/timeSetting";
import UTILS from 'common/src/utils/utils';
export default {
  name: 'graduationAuditSetting',
  data() {
    const validateInteger = (rule, value, callback) => {
      const patternInteger = /^((\d|[1-9]\d)|100)$/;
      if (patternInteger.test(value) || !value) {
        return callback();
      } else {
        return callback(new Error(this.$t('graduationDesign.weekNumInputTips')));
      }
    };
    return {
      api: API,
      queryForm: {
        grade: ''
      },
      graduationAuditTableForm: {
        graduationAuditTableData: []
      },
      graduationAuditTableRules: {
        startTime: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        endTime: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        weekCount: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.queryForm.grade = new Date().getFullYear() + '';
    this.searchList();
  },
  methods: {
    searchList() {
      this.graduationAuditTableForm.graduationAuditTableData = [];
      this.api.getDesignList(this.queryForm.grade).then(({ data }) => {
        this.graduationAuditTableForm.graduationAuditTableData = data;
      }).catch(() => { });
    },
    reset() {
      this.queryForm.grade = new Date().getFullYear() + '';
      this.searchList();
    },
    // 保存
    onSave(row, index) {
      const startField = 'graduationAuditTableData.' + index + '.startTime';
      const endField = 'graduationAuditTableData.' + index + '.endTime';
      const weekField = 'graduationAuditTableData.' + index + '.weekCount';
      this.$refs["graduationAuditTableForm"].validateField(startField, errMsg => {
        if (!errMsg) {
          this.$refs["graduationAuditTableForm"].validateField(endField, errMsgEnd => {
            if (!errMsgEnd) {
              this.$refs["graduationAuditTableForm"].validateField(weekField, errMsgWeek => {
                if (!errMsgWeek) {
                  if (new Date(row.startTime).getTime() >= new Date(row.endTime).getTime()) {
                    this.$eduAlert(this.$t('graduationDesign.startTimeNotGreaterEndTime'), this.$t('graduationDesign.prompt'));
                    return false;
                  }
                  const params = { ...row };
                  if (!params.grade) {
                    params.grade = this.queryForm.grade;
                  }
                  this.api.designSave(params).then(res => {
                    this.$message.success(this.$t('graduationDesign.saveSuccess'));
                    this.searchList();
                  }).catch(() => { });
                } else {
                  return false;
                }
              });
            } else {
              return false;
            }
          });
        } else {
          return false;
        }
      });
    },
    // 启用(停用)
    onEnable(row, index, type) {
      const startField = 'graduationAuditTableData.' + index + '.startTime';
      const endField = 'graduationAuditTableData.' + index + '.endTime';
      const weekField = 'graduationAuditTableData.' + index + '.weekCount';
      this.$refs["graduationAuditTableForm"].validateField(startField, errMsg => {
        if (!errMsg) {
          this.$refs["graduationAuditTableForm"].validateField(endField, errMsgEnd => {
            if (!errMsgEnd) {
              this.$refs["graduationAuditTableForm"].validateField(weekField, errMsgWeek => {
                if (!errMsgWeek) {
                  if (new Date(row.startTime).getTime() >= new Date(row.endTime).getTime()) {
                    this.$eduAlert("开始时间不能大于结束时间!", "提示");
                    return false;
                  }
                  const action = type === "enable" ? "启用" : "停用";
                  this.$eduConfirm(UTILS.i18nReplace(this.$t('graduationDesign.confirmProcessTips'), { action: action }), action).then(() => {
                    const params = { ...row };
                    params.status = type === "enable" ? true : false;
                    if (!params.grade) {
                      params.grade = this.queryForm.grade;
                    }
                    this.api.designSave(params).then(res => {
                      this.$message.success(`${action}成功`);
                      this.searchList();
                    }).catch(() => { });
                  });
                } else {
                  return false;
                }
              });
            } else {
              return false;
            }
          });
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.table-date {
    width: 180px;
}
.table-form-itemclass {
    margin-bottom: 0px;
}
</style>
